<template>
  <div>
    <!-- 差值表达器 this可以省略 -->
    <h3>当前设置的共享值为：{{ count }}</h3>
    <div>
      <button @click="handle">设置-1</button>
    </div>
    <div>
      <button @click="handleN">设置传参的点击事件</button>
    </div>
    <div>
      <!-- 可以直接定义映射过来的函数名 -->
      <button @click="subAsync">异步的点击参数减一</button>
    </div>
    <div>
      <button @click="asncyHandleN">异步的点击参数减N</button>
    </div>
    <span>{{ name }}</span>
    <div>
      <span>{{ showName }}</span>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
// 访问属性 调用方法修改store共享数据的第二种方式

export default {
  data() {
    return {}
  },
  computed: {
    ...mapState(['count', 'name']),
    // 计算属性设置
    ...mapGetters(['showName']),
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subAsyncN']),

    handle() {
      this.sub()
    },
    handleN() {
      this.subN(3)
    },
    // asncyHandle() {
    //   this.subAsync()
    // },
    asncyHandleN() {
      this.subAsyncN(5)
    },
  },
}
</script>

<style lang="less" scoped>
</style>